import React, { Component,lazy } from "react";
import {HashRouter as Router,Route,Switch} from "react-router-dom"
import { Layout, Menu, Breadcrumb } from "antd";
//组件
import Error from "./Error";

import Index from "../components/system/Index";

import Graphic from "../components/course/Graphic";
import EditGraphic from "../components/course/Graphic/Edit"
import NewsClassGraphic from "../components/course/Graphic/NewClass"
import Video from "../components/course/Video";
import EditVideo from "../components/course/Video/Edit";
import NewsClassVideo from "../components/course/Video/NewClass"
import Audio from "../components/course/Audio";
import EditAudio from "../components/course/Audio/Edit";
import NewsClassAudio from "../components/course/Audio/NewClass"
// import Classification from "../components/course/Classification";


import Goods from "../components/goods/Goods";
import GoodsEdit from "../components/goods/goods/Edit";
import GoodsNew from "../components/goods/goods/New"

import Equities from "../components/user/Equities";
import Growth from "../components/user/Growth";
import Integral from "../components/user/Integral";
import MembershipCard from "../components/user/MembershipCard";
import MembershipGrade from "../components/user/MembershipGrade";
import UserSearch from "../components/user/Search";
import UserEdit from "../components/user/Search/Edit";
import UserDetail from "../components/user/Search/Detail"
import Tags from "../components/user/Tags";

import OrderSearch from "../components/order/OrderSearch";

import General from "../components/data/General";
import Study from "../components/data/Study";
import Traffic from "../components/data/Traffic";

import Assets from "../components/assets/Assets";

import Coupons from "../components/marketing/Coupons";
import Discount from "../components/marketing/Discount";
import FullPackageMail from "../components/marketing/FullPackageMail";
import FullReduction from "../components/marketing/FullReduction";
import Giving from "../components/marketing/Giving";
import Group from "../components/marketing/Group";
import Package from "../components/marketing/Package";
import Scenario from "../components/marketing/Scenario";
import SecondsKill from "../components/marketing/SecondsKill";

import Banner from "../components/setting/Banner";
import Employees from "../components/setting/Employees";
import Information from "../components/setting/Information";
import Log from "../components/setting/Log";
import Role from "../components/setting/Role";

import {
  DesktopOutlined,
  NotificationOutlined,
  CloudServerOutlined,
  TransactionOutlined,
  UserOutlined,
  HomeOutlined,
  MacCommandOutlined,
  ShoppingOutlined,
  SettingOutlined, 
} from "@ant-design/icons";

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

export default class System extends Component {
  state = {
    collapsed: false,
  };

  onCollapse = (collapsed: any) => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  render() {
    const { collapsed } = this.state;
    return (
      <div>
        <Layout style={{ minHeight: "100vh" }}>
          <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse} >
            <div className="logo" />
            <div
              style={{
                textAlign: "center",
                color: "#fff",
                fontSize: "16px",
                height: "60px",
                lineHeight: "60px",
              }}
            >
              {<DesktopOutlined />}荣创知识付费运营后台
            </div>
            <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline" >
              <SubMenu key="sub1" icon={<HomeOutlined />} title="系统首页">
                <Menu.Item key="1"><a href="#/system/index">系统首页</a></Menu.Item>
              </SubMenu>
              <SubMenu key="sub2" icon={<MacCommandOutlined />} title="课程管理">
                <Menu.Item key="2"><a href="#/system/course/graphic">图文课程</a></Menu.Item>
                <Menu.Item key="3"><a href="#/system/course/video">视频课程</a></Menu.Item>
                <Menu.Item key="4"><a href="#/system/course/audio">音频课程</a></Menu.Item>
                {/* <Menu.Item key="5"><a href="#/system/course/classification"></a>课程分类</Menu.Item> */}
              </SubMenu>
              <SubMenu key="sub3" icon={<ShoppingOutlined />} title="实物商品">
                <Menu.Item key="6"><a href="#/system/goods/goods">商品管理</a></Menu.Item>
              </SubMenu>
              <SubMenu key="sub4" icon={<UserOutlined />} title="用户管理">
                <Menu.Item key="7"><a href="#/system/user/usersearch">用户查询</a></Menu.Item>
                <Menu.Item key="8"><a href="#/system/user/tags">用户标签</a></Menu.Item>
                <Menu.Item key="9"><a href="#/system/user/membershipgrade">免费会员等级管理</a></Menu.Item>
                <Menu.Item key="10"><a href="#/system/user/membershipcard">付费会员卡管理</a></Menu.Item>
                <Menu.Item key="11"><a href="#/system/user/equities">会员权益</a></Menu.Item>
                <Menu.Item key="12"><a href="#/system/user/integral">积分规则</a></Menu.Item>
                <Menu.Item key="13"><a href="#/system/user/growth">成长值规则</a></Menu.Item>
              </SubMenu>
              <SubMenu key="sub5" icon={<ShoppingOutlined />} title="订单管理">
                <Menu.Item key="14"><a href="#/system/order/ordersearch">订单查询</a></Menu.Item>
              </SubMenu>
              <SubMenu key="sub6" icon={<CloudServerOutlined />} title="数据分析">
                <Menu.Item key="15"><a href="#/system/data/general">数据概况</a></Menu.Item>
                <Menu.Item key="16"><a href="#/system/data/traffic">流量分析</a></Menu.Item>
                <Menu.Item key="17"><a href="#/system/data/study">学习分析</a></Menu.Item>
              </SubMenu>
              <SubMenu key="sub7" icon={<TransactionOutlined />} title="资产管理">
                <Menu.Item key="18"><a href="#/system/assets/assets">资产管理</a></Menu.Item>
              </SubMenu>
              <SubMenu key="sub8" icon={<NotificationOutlined />} title="营销管理">
                <Menu.Item key="19"><a href="#/system/marketing/coupons">优惠券</a></Menu.Item>
                <Menu.Item key="20"><a href="#/system/marketing/discount">限时折扣</a></Menu.Item>
                <Menu.Item key="21"><a href="#/system/marketing/fullreduction">满减满折</a></Menu.Item>
                <Menu.Item key="22"><a href="#/system/marketing/secondskill">秒杀</a></Menu.Item>
                <Menu.Item key="23"><a href="#/system/marketing/fullpackagemail">满包邮</a></Menu.Item>
                <Menu.Item key="24"><a href="#/system/marketing/giving">满赠</a></Menu.Item>
                <Menu.Item key="25"><a href="#/system/marketing/group">拼团</a></Menu.Item>
                <Menu.Item key="26"><a href="#/system/marketing/package">套餐</a></Menu.Item>
                <Menu.Item key="27"><a href="#/system/marketing/scenario">场景营销</a></Menu.Item>
              </SubMenu>
              <SubMenu key="sub9" icon={<SettingOutlined />} title="设置">
                <Menu.Item key="28"><a href="#/system/setting/banner">Banner图管理</a></Menu.Item>
                <Menu.Item key="29"><a href="#/system/setting/employees">员工管理</a></Menu.Item>
                <Menu.Item key="30"><a href="#/system/setting/role">角色管理</a></Menu.Item>
                <Menu.Item key="31"><a href="#/system/setting/log">操作日志</a></Menu.Item>
                <Menu.Item key="32"><a href="#/system/setting/information"></a>个人信息</Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }} />
            <Content style={{ margin: "0 16px" }}>
              {/* <Breadcrumb style={{ margin: "16px 0" }}>
                <Breadcrumb.Item>User</Breadcrumb.Item>
                <Breadcrumb.Item>Bill</Breadcrumb.Item>
              </Breadcrumb> */}
              <div
                className="site-layout-background"
                style={{ padding: 24, minHeight: 360 }}
              >
                <Router>
                  <Switch>
                    <Route path="/system" component={Index} exact></Route>
                    <Route path="/system/index" component={Index}></Route>
                    <Route path="/system/course" component={Graphic} exact></Route>
                    <Route path="/system/course/graphic" component={Graphic}></Route>
                    <Route path="/system/course/graphicedit/:id" component={EditGraphic}></Route>
                    <Route path="/system/course/graphicnewclass" component={NewsClassGraphic}></Route>
                    <Route path="/system/course/video" component={Video}></Route>
                    <Route path="/system/course/videoedit/:id" component={EditVideo}></Route>
                    <Route path="/system/course/videonewclass" component={NewsClassVideo}></Route>
                    <Route path="/system/course/audio" component={Audio}></Route>
                    <Route path="/system/course/audioedit/:id" component={EditAudio}></Route>
                    <Route path="/system/course/audionewclass" component={NewsClassAudio}></Route>
                    {/* <Route path="/system/course/classification" component={Classification}></Route> */}
                    <Route path="/system/goods" component={Goods} exact></Route>
                    <Route path="/system/goods/goods" component={Goods}></Route>
                    <Route path="/system/goods/goodsedit/:id" component={GoodsEdit}></Route>
                    <Route path="/system/goods/goodsnew" component={GoodsNew}></Route>
                    <Route path="/system/user" component={UserSearch} exact></Route>
                    <Route path="/system/user/usersearch" component={UserSearch}></Route>
                    <Route path="/system/user/useredit/:id" component={UserEdit}></Route>
                    <Route path="/system/user/userdetail/:id" component={UserDetail}></Route>
                    <Route path="/system/user/equities" component={Equities}></Route>
                    <Route path="/system/user/growth" component={Growth}></Route>
                    <Route path="/system/user/integral" component={Integral}></Route>
                    <Route path="/system/user/membershipcard" component={MembershipCard}></Route>
                    <Route path="/system/user/membershipgrade" component={MembershipGrade}></Route>
                    <Route path="/system/user/tags" component={Tags}></Route>
                    <Route path="/system/order" component={OrderSearch} exact></Route>
                    <Route path="/system/order/ordersearch" component={OrderSearch}></Route>
                    <Route path="/system/data" component={General} exact></Route>
                    <Route path="/system/data/general" component={General}></Route>
                    <Route path="/system/data/study" component={Study}></Route>
                    <Route path="/system/data/traffic" component={Traffic}></Route>
                    <Route path="/system/assets" component={Assets} exact></Route>
                    <Route path="/system/assets/assets" component={Assets}></Route>
                    <Route path="/system/marketing" component={Coupons} exact></Route>
                    <Route path="/system/marketing/coupons" component={Coupons}></Route>
                    <Route path="/system/marketing/discount" component={Discount}></Route>
                    <Route path="/system/marketing/fullpackagemail" component={FullPackageMail}></Route>
                    <Route path="/system/marketing/fullreduction" component={FullReduction}></Route>
                    <Route path="/system/marketing/giving" component={Giving}></Route>
                    <Route path="/system/marketing/group" component={Group}></Route>
                    <Route path="/system/marketing/package" component={Package}></Route>
                    <Route path="/system/marketing/scenario" component={Scenario}></Route>
                    <Route path="/system/marketing/secondskill" component={SecondsKill}></Route>
                    <Route path="/system/setting" component={Banner} exact></Route>
                    <Route path="/system/setting/banner" component={Banner}></Route>
                    <Route path="/system/setting/employees" component={Employees}></Route>
                    <Route path="/system/setting/information" component={Information}></Route>
                    <Route path="/system/setting/log" component={Log}></Route>
                    <Route path="/system/setting/role" component={Role}></Route>
                    <Route path="*" component={Error}></Route>
                  </Switch>
                </Router>
              </div>
            </Content>
            
          </Layout>
        </Layout>
      </div>
    );
  }
}
